class Arc {
  constructor(props) {
    this.x = 0
    this.y = 0
    this.r = 100
    this.fillStyle = 'rgba(255, 255, 255, 0)'
    this.strokeStyle = ''
    this.lineCap = 'round'
    this.lineWidth = 10
    this.translateX = 0
    this.translateY = 0
    this.endAngle = 0
    Object.assign(this, props)
    return this
  }
  createPath(ctx) {
    const {x, y, r, endAngle} = this
    ctx.beginPath()
    ctx.arc(x, y, r, 135 * Math.PI / 180, endAngle)
    return this
  }
  render(ctx) {
    ctx.save()
    const {fillStyle, strokeStyle, lineCap, lineWidth, translateX, translateY} = this
    ctx.fillStyle = fillStyle
    ctx.strokeStyle = strokeStyle
    ctx.lineCap = lineCap
    ctx.lineWidth = lineWidth
    ctx.translate(translateX, translateY)
    this.createPath(ctx)
    ctx.fill()
    ctx.stroke()
    ctx.restore()
    return this
  }
}